<template>
  <div>
    <div class="row items-center q-mb-lg">
      <div class="col">
        <div class="text-h4 text-weight-bold">技术文章</div>
      </div>
      <div class="col-auto">
        <q-select
          v-model="selectedCategory"
          :options="categories"
          label="分类筛选"
          outlined
          dense
          emit-value
          map-options
          options-dense
          style="width: 150px"
        />
      </div>
    </div>

    <!-- 文章列表 -->
    <div class="row q-col-gutter-md">
      <div v-for="article in filteredArticles" :key="article.id" class="col-12 col-md-6 col-lg-4">
        <q-card class="article-card">
          <q-img
            :src="article.image || 'https://source.unsplash.com/random/800x450?blog'"
            :ratio="16/9"
            spinner-color="primary"
            spinner-size="50px"
          >
            <div class="absolute-top-right q-pa-xs">
              <q-chip
                outline
                color="primary"
                text-color="primary"
                size="sm"
              >
                {{ article.category }}
              </q-chip>
            </div>
            <div class="absolute-bottom text-white q-pa-xs" style="background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%)">
              <div class="text-subtitle1 text-weight-bold ellipsis">{{ article.title }}</div>
              <div class="text-caption">{{ article.date }}</div>
            </div>
          </q-img>

          <q-card-section>
            <div class="text-caption ellipsis-2-lines q-mb-xs">{{ article.summary }}</div>
            
            <div class="row q-gutter-xs q-mt-sm">
              <q-chip
                v-for="tag in article.tags"
                :key="tag"
                dense
                outline
                size="sm"
              >
                #{{ tag }}
              </q-chip>
            </div>
          </q-card-section>

          <q-separator />

          <q-card-actions align="right">
            <q-btn flat color="primary" :to="`/articles/${article.id}`">
              阅读全文
              <q-icon name="arrow_forward" size="xs" class="q-ml-xs" />
            </q-btn>
          </q-card-actions>
        </q-card>
      </div>
    </div>

    <!-- 分页控件 -->
    <div class="row justify-center q-mt-lg">
      <q-pagination
        v-model="currentPage"
        :max="totalPages"
        direction-links
        boundary-links
        icon-first="first_page"
        icon-last="last_page"
        icon-prev="keyboard_arrow_left"
        icon-next="keyboard_arrow_right"
        class="q-mt-md"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const currentPage = ref(1)
const pageSize = 6

const selectedCategory = ref(null)

const categories = [
  { label: '全部分类', value: null },
  { label: '技术分享', value: '技术分享' },
  { label: '前端开发', value: '前端开发' },
  { label: '性能优化', value: '性能优化' },
]

const articles = ref([
  {
    id: 1,
    title: 'Vue 3 组合式 API 实践指南',
    date: '2024-03-15',
    category: '技术分享',
    summary: '本文详细介绍了 Vue 3 组合式 API 的基本概念和使用方法，包括响应式系统、生命周期钩子等核心特性的实践应用，以及如何从 Options API 迁移到 Composition API。',
    tags: ['Vue 3', 'JavaScript', '前端开发'],
    image: 'https://source.unsplash.com/random/800x450?vue'
  },
  {
    id: 2,
    title: 'Quasar 框架开发体验',
    date: '2024-03-10',
    category: '技术分享',
    summary: '分享在使用 Quasar 框架开发项目过程中的一些经验和最佳实践，包括组件定制、主题配置、响应式布局等内容，以及与其他 UI 框架的对比分析。',
    tags: ['Quasar', 'UI 组件', '前端开发'],
    image: 'https://source.unsplash.com/random/800x450?ui'
  },
  {
    id: 3,
    title: '前端性能优化实践',
    date: '2024-03-05',
    category: '性能优化',
    summary: '探讨前端性能优化的各种策略和最佳实践，包括代码分割、懒加载、缓存优化、图片优化等技术，以及如何使用现代工具进行性能监测和分析。',
    tags: ['性能优化', 'Web 性能', '前端技术'],
    image: 'https://source.unsplash.com/random/800x450?performance'
  },
  {
    id: 4,
    title: 'TypeScript 在大型项目中的应用',
    date: '2024-02-28',
    category: '前端开发',
    summary: '探讨在大型前端项目中引入 TypeScript 的好处和挑战，以及如何有效地使用 TypeScript 提高代码质量和开发效率，包含实际案例分析。',
    tags: ['TypeScript', 'JavaScript', '前端开发'],
    image: 'https://source.unsplash.com/random/800x450?typescript'
  },
  {
    id: 5,
    title: '现代前端构建工具对比',
    date: '2024-02-20',
    category: '前端开发',
    summary: '对比 Webpack、Vite、Rollup 等现代前端构建工具的特点、性能和适用场景，帮助开发者选择最适合自己项目的构建工具，提高开发效率。',
    tags: ['构建工具', 'Webpack', 'Vite'],
    image: 'https://source.unsplash.com/random/800x450?tools'
  },
  {
    id: 6,
    title: 'CSS Grid 布局详解',
    date: '2024-02-15',
    category: '前端开发',
    summary: '深入讲解 CSS Grid 布局系统的核心概念、常用属性和高级技巧，通过实例展示如何创建复杂的响应式布局，以及与 Flexbox 的结合使用。',
    tags: ['CSS', 'Grid', '响应式设计'],
    image: 'https://source.unsplash.com/random/800x450?grid'
  },
  {
    id: 7,
    title: 'Web 应用无障碍设计指南',
    date: '2024-02-08',
    category: '前端开发',
    summary: '探讨 Web 无障碍性设计的重要性和最佳实践，包括如何使用语义化标签、ARIA 属性、键盘导航等技术，确保所有用户都能轻松访问您的 Web 应用。',
    tags: ['无障碍设计', 'Web 标准', '用户体验'],
    image: 'https://source.unsplash.com/random/800x450?accessibility'
  },
  {
    id: 8,
    title: 'Vue 与 React 的对比分析',
    date: '2024-02-01',
    category: '技术分享',
    summary: '客观分析 Vue 和 React 这两个流行前端框架的异同，包括性能、生态系统、学习曲线、开发效率等方面，帮助开发者根据项目需求选择合适的框架。',
    tags: ['Vue', 'React', '框架对比'],
    image: 'https://source.unsplash.com/random/800x450?framework'
  }
])

const filteredArticles = computed(() => {
  let result = articles.value
  
  // 分类筛选
  if (selectedCategory.value) {
    result = result.filter(article => article.category === selectedCategory.value)
  }
  
  // 分页处理
  const startIndex = (currentPage.value - 1) * pageSize
  return result.slice(startIndex, startIndex + pageSize)
})

const totalPages = computed(() => {
  let count = articles.value.length
  if (selectedCategory.value) {
    count = articles.value.filter(article => article.category === selectedCategory.value).length
  }
  return Math.ceil(count / pageSize)
})
</script>

<style scoped>
.article-card {
  height: 100%;
  transition: transform 0.3s;
  border-radius: 12px;
  overflow: hidden;
}

.article-card:hover {
  transform: translateY(-5px);
}

.ellipsis-2-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style> 